<template>
  <div class="tags-input-container">
    <div class="tags-input-wrapper">
      <div class="tags-list">
        <el-tag
          v-for="(tag, index) in tags"
          :key="index"
          closable
          :disable-transitions="false"
          @close="handleClose(tag, index)"
        >
          {{ tag }}
        </el-tag>
      </div>
      <el-input
        class="tag-input"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
        :placeholder="placeholder"
      >
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">
        + {{ addButtonText }}
      </el-button>
    </div>
    <div v-if="error" class="error-message">{{ error }}</div>
  </div>
</template>

<script>
export default {
  name: 'TagsInput',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: '请输入内容后回车'
    },
    addButtonText: {
      type: String,
      default: '添加标签'
    },
    maxTags: {
      type: Number,
      default: 0
    },
    allowDuplicates: {
      type: Boolean,
      default: false
    },
    minLength: {
      type: Number,
      default: 0
    },
    maxLength: {
      type: Number,
      default: 0
    },
    validator: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      tags: this.value,
      inputVisible: false,
      inputValue: '',
      error: ''
    }
  },
  watch: {
    value(newVal) {
      this.tags = newVal
    },
    tags(newVal) {
      this.$emit('input', newVal)
      this.$emit('change', newVal)
    }
  },
  methods: {
    handleClose(tag, index) {
      this.tags.splice(index, 1)
      this.error = ''
      this.$emit('remove', tag, index)
    },
    showInput() {
      this.inputVisible = true
      this.error = ''
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue.trim()
      
      if (inputValue) {
        // 验证最大标签数
        if (this.maxTags > 0 && this.tags.length >= this.maxTags) {
          this.error = `最多只能添加 ${this.maxTags} 个标签`
          this.inputValue = ''
          return
        }
        
        // 验证重复
        if (!this.allowDuplicates && this.tags.includes(inputValue)) {
          this.error = '标签已存在'
          this.inputValue = ''
          return
        }
        
        // 验证长度
        if (this.minLength > 0 && inputValue.length < this.minLength) {
          this.error = `标签长度不能小于 ${this.minLength} 个字符`
          return
        }
        
        if (this.maxLength > 0 && inputValue.length > this.maxLength) {
          this.error = `标签长度不能超过 ${this.maxLength} 个字符`
          return
        }
        
        // 自定义验证
        if (this.validator) {
          const validationResult = this.validator(inputValue)
          if (validationResult !== true) {
            this.error = validationResult || '标签验证失败'
            return
          }
        }
        
        this.tags.push(inputValue)
        this.error = ''
        this.$emit('add', inputValue)
      }
      
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.tags-input-container {
  .tags-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    
    .tags-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 5px;
      
      .el-tag {
        margin-right: 10px;
        margin-bottom: 5px;
      }
    }
    
    .tag-input {
      width: 120px;
      margin-right: 10px;
      margin-bottom: 5px;
      vertical-align: bottom;
    }
    
    .button-new-tag {
      margin-bottom: 5px;
    }
  }
  
  .error-message {
    color: #F56C6C;
    font-size: 12px;
    margin-top: 5px;
  }
}
</style> 